<template>
    <el-form-item label="商品" :prop="`creatives_base.creatives_class.${dataForm.creatives_index}.item_group_ids`" :rules="{required: true, message: '请选择', trigger: ['blur', 'change']}">
        <div class="goods_box">
            <div class="goods_head flexbox flexcenter flexbetween">
                <el-button plain class="plain_blue" size="small" icon="el-icon-circle-plus-outline" @click="addGoods">添加商品</el-button>
                <div class="has_num_text">已选：<span class="blue">{{dataForm.creatives_base.creatives_class[dataForm.creatives_index].item_group_ids.length}}</span>/20</div>
            </div>
            <div class="goods_content">
                <template v-if="dataForm.creatives_base.creatives_class[dataForm.creatives_index].item_group_ids.length>0">
                    <div class="goods_item flexbox flexcenter" v-for="(item,index) in dataForm.creatives_base.creatives_class[dataForm.creatives_index].item_group_ids" :key="item.item_group_id">
                        <img :src="item.image_url" alt="" class="goods_img">
                        <div class="goods_info flex">
                            <div class="goods_name">{{item.title}}</div>
                            <div class="goods_id">SPU ID: {{item.item_group_id}}</div>
                        </div>
                        <i class="el-icon-delete" @click="deleteGoods(index)"></i>
                    </div>
                </template>
                <div class="no_goods" v-else>请添加商品</div>
            </div>
        </div>
    </el-form-item>
</template>

<script>
export default {
    props: ["dataForm"],
    components: {},
    name: "",
    data() {
        return {};
    },
    created() {},
    methods: {
        sessionSave() {
            this.$emit("sessionSave");
        },

        deleteGoods(index){
            this.dataForm.creatives_base.creatives_class[this.dataForm.creatives_index].item_group_ids.splice(index,1)
            this.sessionSave()
        },

        addGoods(){
            this.$emit("addGoods");
        }
    },
};
</script>


<style scoped>
.goods_content{
    height: 300px;
    overflow-y: auto;
    margin: 0 -20px;
    padding: 0 20px;
}
.no_goods{
    font-size: 14px;
    color: #b4b7bd;
    text-align: center;
    line-height: 300px;
}
.goods_box {
    width: 526px;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid #ebebeb;
    border-radius: 4px;
}
.has_num_text {
    font-size: 14px;
    color: #b4b7bd;
}
.goods_item {
    position: relative;
    margin-top: 20px;
    padding-right: 40px;
}
.goods_img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 4px;
}
.goods_info {
    margin-left: 12px;
    min-width: 0;
}
.goods_name {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.goods_id{
    font-size: 12px;
    color: #B4B7BD;
    line-height: 17px;
    height: 17px;
    margin-top: 4px;
}
.el-icon-delete{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #B4B7BD;
    cursor: pointer;
}
.blue{
    color: #4475FF;
}
</style>

